<template>
  <div id="app" class="df fd ac">
    <!-- 头部 -->
    <div class="header">
      <h1>
        <img @click="back" class="left-arrows" src="../../../assets/img/home-img/left-arrows.png" alt="">
        附近门店
      </h1>
    </div>
    <!-- 门店 -->
    <div class="box">
      <img :src="shop.gatePicture" alt="" class="title">
      <div style="font-size: 22rem;">
        <p class="f30 mb20">{{ shop.user.name }}</p>
        <p class="f20 mb30">
          <van-icon name="star" color="#FFC100" size="15" v-for="(el, index) in shop.user.star"
            style="margin-right: 5rem;" :key="index" />{{ shop.user.star }}分 销量：{{ shop.user.quantity }}
        </p>
        <p class="mb25">营业时间：{{ shop.user.week }} {{ shop.user.time }}</p>
        <p class="mb25">位置：{{ shop.user.address }} <img @click="navigation" class="navigation pl30"
            src="../../../assets/img/maintain/plane(1).png" alt=""> </p>
      </div>
    </div>
    <!-- 服务项目 -->
    <div class="box">
      <p class="f30">服务项目</p>
      <div v-for="(el, index) in shop.project" class="mt30 boxItem" :key="index" :id="'serve' + index">
        <label :for="index">
          <div class="df j-b ac mb30">
            <p class="f25" :class="{ active: arr[arr.length - 1] == index }">
              <input @click="fun" :id="index" type="checkbox" class="checkboxs" v-model="arr" :value="index">
              {{ el.serviceItem }}
            </p>
            <div>
              <p v-if="el.currentPrice">
                <span class="f25 pr20" style="color:red;">{{ '￥' + el.currentPrice }}</span>
                <span class="f20" style="color:#808080;text-decoration:line-through;">{{ '￥' + el.originPrice }}</span>
              </p>
              <p class="f20" style="color:#808080;" v-else>{{ '￥' + el.originPrice }}</p>
            </div>
          </div>
          <p class="f20" style="line-height:35rem;">{{ el.introduce }}</p>
          <!-- <hr style="margin-top: 35rem;"> -->
        </label>
      </div>
    </div>
    <!-- 服务评价 -->
    <div class="box">
      <p class="f30">服务评价</p>
      <div v-for="(el, index) in shop.appraise" :key="index" class="mt40 df">
        <img class="fl mr30 head" src="../../../assets/img/maintain/serve-bg.png" alt="">
        <div style="flex: 1;">
          <p class="mb20 df j-b ac">
            <span class="f25">{{ el.name }}</span>
            <span class="f15" style="color:#7B7B7B;">{{ el.time }}</span>
          </p>
          <div>{{ el.grade }}</div>
          <p class="mt35 mb40">{{ el.remark }}</p>
          <hr>
        </div>
      </div>
    </div>
    <!-- footer -->
    <div class="footer df j-a ac">
      <button @click="car = true">购物车（{{ arr.length }}）</button><button @click="affirm">确认已选服务</button>
    </div>
    <!-- 购物车 -->
    <div v-if="car">
      <div>
        <span></span>  
        <img src="" alt="">
      </div>
      <van-checkbox-group v-model="arr">
        <div v-for="(el,index) in arr">
          <van-checkbox name="a">复选框 a</van-checkbox>
          <span>￥</span>
        </div>
      </van-checkbox-group>
      <div>
        <button>合计：￥</button><button @click="affirm">确认已选服务</button>
      </div>
    </div>
  </div>
</template>

<script>
import { serveProject } from '@/api/maintain'
export default {
  mounted() {
    this.shop.user = this.$route.query.user
    serveProject({
      business: this.shop.name
    })
      .then(r => {
        this.shop.project = r.data.list
      })
  },
  watch: {
    arr: {
      deep: true,
      handler(n, o) {
        // console.log(n);
        // console.log(serve0);
      }
    }
  },
  data() {
    return {
      car:false,
      arr: [],
      num: null,
      shop: {
        user: {
          week: '周一至周五',// 星期
          time: '早上8：00-晚上22：00', // 当天营业时间
          quantity: 555,// 销量
        },
        project: [],// 服务项目
        appraise: [
          {
            head: '' //  头像
            , name: 'asdawdasd'// 名字
            , time: '2002-9-9'// 时间
            , grade: 6// 评价分数
            , remark: 'adqwhufgasc ajkhsvoudqyw vuouhdh as'// 评价详情
          },
          {
            head: ''
            , name: 'asdawdasd'
            , time: '2002-9-9'
            , grade: 6
            , remark: 'adqwhufgasc ajkhsvoudqyw vuouhdh as'
          },
          {
            head: ''
            , name: 'asdawdasd'
            , time: '2002-9-9'
            , grade: 6
            , remark: 'adqwhufgasc  vuouhdh as'
          },
        ], // 评价
      },
    }
  },
  methods: {
    navigation() {
      this.$router.push({
        path: '/upNavigation'
      })
    },
    back() {
      this.$router.push({
        path: '/upNearby'
      })
    },
    affirm() {
      this.$router.push({
        path: '/upConfirmOrder',
        // query:
      })
    },
    fun() {
    }
  }
}
</script>

<style scoped>
.boxItem{
  padding-bottom: 35rem;
  border-bottom: 1rem solid #dfdfdf;
}
.footer button:nth-child(1) {
  background-image: linear-gradient(to right, #3789FF, #0662E6);
}

.footer button:nth-child(2) {
  background-image: linear-gradient(to right, #FF7438, #FF4000);
}

.footer button {
  height: 64rem;
  width: 286rem;
  border-radius: 50rem;
  color: white;
  font-size: 26rem;
  border: none;
}

.footer {
  position: fixed;
  bottom: 0;
  height: 118rem;
  background-color: white;
  width: 100%;
  z-index: 20;
}

.mt35 {
  margin-top: 35rem;
}

.head {
  width: 110rem;
  height: 110rem;
}

.active {
  color: #357BEF;
}

.checkboxs {
  width: 25rem;
  height: 25rem;
  vertical-align: middle;
  border: blue;
  color: blue;
  background-color: blue;
}

.navigation {
  width: 27rem;
  height: 27rem;
  vertical-align: middle;
}

.title {
  width: 100%;
  height: 420rem;
  border-radius: 20rem;
  margin-bottom: 42rm;
}

.df {
  display: flex !important;
}

.fd {
  flex-direction: column !important;
}

.jc {
  justify-content: center !important;
}

.ac {
  align-items: center !important;
}

.j-a {
  justify-content: space-around !important;
}

.j-b {
  justify-content: space-between !important;
}

.left-arrows {
  height: 40rem;
  position: absolute;
  left: 24rem;
}

.header {
  position: absolute;
  width: 100%;
  height: 436rem;
  z-index: 0;
  background-image: url('../../../assets/img/home-img/bg.png');
  background-size: 100%;
  top: 0rem;
}

.header h1 {
  text-align: center;
  font-size: 36rem;
  color: white;
  margin: 70rem 0 48rem;
}

.box {
  background-color: white;
  border-radius: 15rem;
  padding: 32rem;
  width: 92%;
  box-sizing: border-box;
  margin-top: 18rem;
  z-index: 1;
}

#app {
  background-color: #F7F7F7;
  padding: 148rem 0 170rem;
}
</style>